<!-- Building.vue -->
<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus"
import { onMounted, reactive, ref } from "vue"
import { getBuildingListAPI } from "@/pages/enterpriseManager/buildingManager/apis"

/* ---------- 类型 ---------- */
interface BuildingItem {
  id: number
  name: string
  floors: number
  area: number
  fee: number
  status: string
}

/* ---------- 分页参数 ---------- */
const params = reactive({
  page: 1,
  pageSize: 10
})
const total = ref(0)

/* ---------- 搜索表单 ---------- */
const searchForm = reactive({
  name: ""
})

/* ---------- 表格数据 ---------- */
const tableData = ref<BuildingItem[]>([])

/* ---------- 请求列表 ---------- */
async function getBuildingList() {
  const res = await getBuildingListAPI({
    page: params.page,
    pageSize: params.pageSize,
    name: searchForm.name
  })
  tableData.value = res.data.rows
  total.value = res.data.total
}

/* ---------- 事件 ---------- */
function handleSearch() {
  params.page = 1 // 查询重置到第一页
  getBuildingList()
}

function handleReset() {
  searchForm.name = ""
  params.page = 1
  getBuildingList()
}

function handleEdit(row: BuildingItem) {
  console.log("编辑", row)
}

async function handleDelete(id: number) {
  try {
    await ElMessageBox.confirm("确定删除该楼宇吗？", "提示", { type: "warning" })
    // await deleteBuildingAPI(id)
    ElMessage.success("删除成功")
    getBuildingList() // 删除后刷新
  } catch {
    ElMessage.info("已取消")
  }
}

/* ---------- 分页事件 ---------- */
function handleSizeChange(val: number) {
  params.pageSize = val
  params.page = 1
  getBuildingList()
}

function handleCurrentChange(val: number) {
  params.page = val
  getBuildingList()
}

/* ---------- 初始化 ---------- */
onMounted(() => {
  getBuildingList()
})
</script>

<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">
        楼宇名称：
      </div>
      <el-input
        v-model="searchForm.name"
        placeholder="请输入内容"
        class="search-main"
        clearable
      />
      <el-button type="primary" @click="handleSearch">
        查询
      </el-button>
      <el-button @click="handleReset">
        重置
      </el-button>
    </div>

    <!-- 表格区域 -->
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="name" label="楼宇名称" width="180" />
        <el-table-column prop="floors" label="层数" />
        <el-table-column prop="area" label="在管面积(m²)" width="120" />
        <el-table-column prop="fee" label="物业费(元/m²)" width="120" />
        <el-table-column prop="status" label="状态" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button size="mini" type="text" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <div class="pagination">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          v-model:page-size="params.pageSize"
          v-model:current-page="params.page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 50]"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.building-container {
  padding: 20px;
  .table {
    width: 100%;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(237, 237, 237, 0.9);
  padding-bottom: 20px;
  margin-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
</style>
